@import "../../../style/common.scss";
.message-detail-page {
  //background-color: #f8faff;
  padding: 20px;
  overflow-y: scroll;
  :deep(.custom-rate-class) {
    .wd-message-box__flex {
      button:nth-child(1) {
        color: #3d3d3d;
        background-color: #f6f8fa;
      }

      button:nth-child(2) {
        background-color: #007dff;
      }
    }
  }

  .message-detail-box {
    flex: 1;
    overflow-y: auto;
    padding-bottom: var(--safe-area-inset-bottom);
  }

  .detail-head {
    //background: #ffffff;
    //border: 1px dashed #919191;
    box-sizing: border-box;
    margin-bottom: 10px;

    .detail-item {
      border-radius: 20rpx;
      background: #fff;

      .item-head {
        height: 50rpx;
        display: flex;
        justify-content: space-between;
        padding: 20rpx;
        border-bottom: 2rpx solid #f6f8fa;
        line-height: 20rpx;
        align-items: center;
        position: relative;

        view {
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .type-icon {
          width: 20px;
          height: 20px;
        }

        .title {
          font-weight: 400;
          font-size: 28rpx;
          color: #3d3d3d;
          margin: 0 10px;
        }

        .status {
          margin-right: 5px;
          font-weight: 400;
          font-size: 20rpx;
          color: #ff9900;
          background: #fff0d9;
          border-radius: 4rpx;
          border: 2rpx solid #ff9900;
          padding: 2px 4px;
        }

        .toConfirmed {
          color: #ff9900;
          background: #fff0d9;
          border: 2rpx solid #ff9900;
        }

        .confirmed {
          color: #14c85c;
          background: #e3f9e9;
          border: 2rpx solid #14c85c;
        }

        .refuse {
          color: #f53f3f;
          background: #ffe1e1;
          border: 2rpx solid #f53f3f;
        }

        .status-ack {
          width: 124rpx;
          height: 124rpx;
          position: absolute;
          right: 10px;
          top: 10px;
        }
      }

      .item-center {
        font-weight: 400;
        font-size: 24rpx;
        color: #4e5969;
        margin: 10px;
      }

      .item-bottom {
        font-weight: 400;
        font-size: 20rpx;
        color: #86909c;
        padding: 20px 10px 15px;

        .time {
          float: right;

          text {
            color: #FF9900;
          }
        }
      }
    }

    .refuse-row {
      padding: 10px;
      border-top: 2rpx solid #f5f7fa;

      &-text {
        font-weight: 400;
        font-size: 24rpx;
        color: #86909c;
        margin-bottom: 10px;
        display: block;
      }

      &-info {
        font-weight: 400;
        font-size: 24rpx;
        color: #3d3d3d;
        word-wrap: break-word;
        word-break: break-all;
        overflow-wrap: break-word;
      }
    }
  }

  .detail-content {
    //background: #ffffff;
    //border: 1px dashed #919191;
    //padding: 12px;
    margin-bottom: 60px;
    border-radius: 20rpx;
    margin-top: 32rpx;

    .detail-content__bg {
      height: 60rpx;
      background-image: url("http://51-jzt-dev.oss-cn-hangzhou.aliyuncs.com/miniapp/message_bg.png");
      background-repeat: no-repeat;
      background-size: 100% 60rpx;
    }

    .detail-content__block {
      //position: absolute;
      //width: 100%;
      //top: -30rpx;
      //left: ;
      width: calc(100% - 60rpx);
      margin: -40rpx 30rpx 40rpx 30rpx;
      background: #fff;
      padding-top: 50rpx;
      padding-bottom: 20rpx;
      position: relative;

      .gradient-bg {
        width: 100%;
        height: 20rpx;
        position: absolute;
        top: 0rpx;
        background: linear-gradient(180deg, rgba(25, 141, 249, 0.4) 0%, rgba(255, 255, 255, 0) 100%);
      }
    }

    .item-row {
      margin-bottom: 20px;
      font-weight: 400;
      font-size: 24rpx;
      padding: 0rpx 32rpx;

      .title {
        color: #3d3d3d;
        margin-bottom: 10px;
        font-weight: bold;
      }

      .value {
        color: #3d3d3d;

        .name {
          margin: 0 8px 6px 0;
          display: inline-block;
        }

        .link {
          color: #007dff;
          // text-decoration: underline;
          // cursor: pointer;
          word-wrap: break-word;
          word-break: break-all;
          overflow-wrap: break-word;
        }

        .price {
          color: #ff3333;
        }

        image {
          width: 50px;
          height: 50px;
        }

        .text {
        }

        .imageUpload {
          display: flex;
          gap: 10px;
        }
      }
    }
  }

  .detail-btn {
    height: 100rpx;
    padding: 20px 0;
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #fff;

    button {
      width: 248rpx;
      height: 80rpx;
      background: #f6f8fa;
      border-radius: 12rpx;
      font-weight: 400;
      font-size: 32rpx;
      color: #4e5969;
    }

    button:nth-child(3) {
      color: #fff;
      background: #007dff;
    }
    .upload-file{
      margin: 0px 20rpx;
      text-align: center;
      @include fontStyle(24rpx,#3D3D3D);
      &__img{
        @include blockStyle(40rpx,40rpx,none);
      }
    }
  }

  .wrapper {
    position: fixed;
    bottom: 0;
    width: 100%;
    background: #ffffff;
    border-radius: 40rpx 40rpx 0rpx 0rpx;
    padding: 25px;
    box-sizing: border-box;
    text-align: center;
    font-weight: 400;
    font-size: 32rpx;
    color: #000;
    transform: translateY(100%);
    transition: transform 0.3s ease;

    &-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 25px;

      .confirmed {
        color: #007dff;
      }
    }

    :deep(.wd-textarea) {
      width: 100%;
      background: #f6f8fc;
      border-radius: 24rpx;
      width: auto;
    }

    :deep(.wd-textarea__value) {
      background: unset;
      padding-bottom: unset;
    }

    :deep(.wd-textarea__count) {
      background: unset;
    }
  }

  .popup-show {
    transform: translateY(0); /* 显示时移动到屏幕底部 */
  }

  //file-list
  .file-list{
    background:#fff;
    border-radius: 20rpx;
    padding: 30rpx;
    margin-bottom: 30rpx;
    box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(134,144,156,0.1);
    &__title{
      @include fontStyle(24rpx,#3D3D3D,bold);
    }
    .file-item{
      border-bottom:2rpx solid #F2F3F5;
      padding:20rpx 0px;
      @include flexStyle();
      &__left{
        width: 70%;
        @include flexStyle(flex-start,center);
        .file-img,.file-video{
          @include blockStyle(64rpx,64rpx,none,8rpx);
        }
        .file-item__text{
          @include fontStyle(24rpx,#3D3D3D);
          margin-left: 20rpx;
        }
      }
      &__delete{
          @include blockStyle(48rpx,48rpx,none)
      }
      &__download{
        :deep(.wd-button){
          font-size: 24rpx;
          @include blockStyle(100rpx,48rpx,#007DFF,24rpx);
          line-height: 48rpx;
          min-width: auto;
        }
      }
      &:last-child{
        border-bottom: none;
      }
    }
    .no-file{
      @include fontStyle(24rpx,#9B9B9B);
      margin: 20rpx 0rpx;
    };
  }
}